<template>
    <div class="content-box">
        <div class="serchBox clearfix">
           <el-form :inline="true">
                <el-form-item label="操作账号">
                  <el-date-picker
                      v-model="searchDate"
                      type="date"
                      placeholder="选择日期"
                  />
                </el-form-item>
                <el-form-item label="咨询师姓名">
                    <el-input v-model="searchName" placeholder="请输入咨询师姓名"/>
                </el-form-item>
                <el-form-item label="操作时间">
                    <el-date-picker
                        v-model="searchDate"
                        type="date"
                        placeholder="选择日期"
                    />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="containerBox">
            <div class="tableBox">
                <el-table :data="tableData" border>
                    <el-table-column label="咨询师姓名" align="right" width="150">
                        <el-table-column prop="name" label="12-23 星期二" width="150">
                        </el-table-column>
                    </el-table-column>
                    <el-table-column
                        v-for="(col, i) in columnList"
                        :key="i"
                        :prop="col.prop"
                        :label="col.label"
                        align="center"
                    >
                        <template v-if="col.children">
                            <el-table-column
                                v-for="(item, index) in col.children"
                                :key="index"
                                :prop="item.prop"
                                :label="item.label"
                            >
                            </el-table-column>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const searchDate = ref('');
const searchName = ref('');
const tableData = [{
          name: "覆盖率",
          expected: "111",
          accuracy: "111",
          test: "111",
        },
        {
          name: "准确率",
          expected: "111",
          accuracy: "111",
          test: "111",
        },]
const columnList = [{
          prop: "expected",
          label: "预期值",
        },
        {
          prop: "accuracy",
          label: "训练值",
        },
        {
          prop: "test",
          label: "检验值",
        },];
const tableList: ({ id: number; text: string; } | undefined)[] =[];
let getTime =  ()  => {
    for(var i=0; i < 30; i++){
        let left = i%2 == 0 ? 9 + i/2 : 9 + (i-1)/2;
        let right =  i%2 == 0 ? '00' : '30';
        let item;
        if (left < 10){
            item = {
                id: i,
                text: '0' + left + ':' + right
            }
        } else {
            item = {
                id: i,
                text: left + ':' + right
            }
        }
        tableList.push(item)
    }
    console.log(tableList)
}
getTime();
</script>

<style scoped lang="scss">
.containerBox{
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 10px;
    // padding: 10px;
    border-radius: 4px;
    border: 1px solid #efefef;
    box-shadow: 0 0 10px #999!important;

}

// 表格样式style
/deep/ .el-table th {
  overflow: initial;
}
/deep/.el-table th > .cell {
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 14px;
  color: #2e3444;
}

/deep/ .el-table thead tr:first-of-type th:first-of-type,
/deep/ .el-table thead tr:nth-of-type(2) th:first-of-type {
  border-bottom: none;
  padding: 0;
}
/deep/ .el-table thead tr:last-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  background-color: #ebeef5;
  display: block;
}
/deep/ .el-table thead tr:last-of-type th:first-of-type:before {
  height: 183px; //根据情况调整
  bottom: 0;
  right: 0; //根据情况调整
  transform: rotate(-72deg); //根据情况调整
  transform-origin: bottom;
}
/deep/ .el-table tbody tr td:first-of-type .cell {
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 14px;
  color: #2e3444;
  font-weight: 600;
  text-align: center;
}
</style>